window.onload=function(){
	var imgBox=document.querySelector(".imgBox");
var imgLi=document.querySelectorAll(".imgBox li");
imgBox.style.width=310*imgLi.length+"px";
var aBox=document.querySelector(".aBox");
var aLi=document.querySelectorAll(".aBox li");
var Box=document.querySelector(".Box");
aBox.style.left=(Box.offsetWidth-aBox.offsetWidth)/2+"px";
var index=0;
var timer;
aLi[index].style.background="gray";
//用于循环的函数
clearTime();
for(var i=0;i<aLi.length;i++){
	aLi[i].num=i;
	aLi[i].onclick=function(){
		//停止循环
		clearInterval(timer);
		index=this.num;
		//imgBox.style.left=-310*index+"px";
		set();
		getStyle(imgBox,"left",20,-310*index,function(){
			//重新开始循环
			clearTime();
		})
	}
}
function clearTime(){
	timer=setInterval(function(){
	index++;
	if(index>=imgLi.length){
		index=0;
	}
	//imgBox.style.left=-310*index+"px";
	
	getStyle(imgBox,"left",20,-310*index,function(){
		set();	
		})
},3000);
}
function set(){
	if(index>=imgLi.length-1){
		index=0;
		imgBox.style.left=0;
	}
	for(var i=0;i<aLi.length;i++){
		//直接等于CSS内的值
		aLi[i].style.background="";
	}
	aLi[index].style.background="gray";
}
	function getStyle(obj,direction,speed,fine,clearFined){
					clearInterval(obj.timer);
					//使速度没有正负之分
					var oldSpeed=parseInt(setStyle(obj,direction));
					if(fine<oldSpeed){
						speed=-speed;
					}
					obj.timer=setInterval(function(){
					var oldValue=parseInt(setStyle(obj,direction));
					var newValue=oldValue+speed;
					if(newValue>fine&&speed>0||newValue<fine&&speed<0){
						newValue=fine;
					}
					obj.style[direction]=newValue+"px";
					if(newValue==fine){
						clearInterval(obj.timer);
						//执行完成并结束以后，直接传递进来一个函数，有则执行，没有则不执行
						clearFined&&clearFined();
					}
					},100);
				}
				function setStyle(obj,name){
					if(window.getComputedStyle){
						return getComputedStyle(obj,null)[name];
					}else if(currentStyle){
						return obj.currentStyle[name];
					}
				}

}